<template>
  <el-container id="index-module">
    <el-header :style="{position:'fixed',right:'0px',left: '0px','z-index':999,'height':'60px'}">
      <!--  'background':$store.getters.collapsed?'red':'green'-->
      <transition name="fade">
        <navbar :style="{'min-width':'800px',}" />
      </transition>
    </el-header>
    <div class="hamburg" :style="{left:$store.getters.collapsed?'64px':'219px',transition:'all ease-in-out 300ms'}">
      <!-- 收起侧栏or展开侧栏-->
      <hamburger :title="$store.getters.collapsed?'展开侧栏':'收起侧栏'" :toggle-click="toggleSideBar" class="hamburger-container" style="margin-left:24px;margin-top:-5px" />
      <ul>
        <li v-for="(item,index) in routerList" :key="item.id" :class="item.active?'navheader-active':'navheader'" @click.self="$route.path===item.path?'':$router.push(item.path)">
          {{ item.name }}
          <i v-if="index" class="el-icon-circle-close close-icon" @click.stop="handleClose(index)" />
        </li>
      </ul>
    </div>
    <!-- <el-container style="overflow-y:scroll;overflow-x:hidden"> -->
    <transition>
      <el-aside width="220px" class="transation2" style="position:fixed;top:60px">
        <!-- <sidebar /> -->
        <leftnav />
      </el-aside>
    </transition>

    <main id="el-main" ref="elmain" :style="{'padding-left': $store.getters.collapsed?'88px':'244px'}" @scroll="handleScroll()">
      <keep-alive exclude="Deal">
        <transition name="slide">
          <router-view class="router-view" :style="{'background-color':$route.path==='/index'?'rgb(240, 242, 245)':'#fff'}" />
        </transition>
      </keep-alive>
    </main>
    <footer :style="{position:'fixed',height:'24px',right:'15px',display:'block',bottom:'0px',left: $store.getters.collapsed?'64px':'220px','z-index':999,background:'#f0f2f5'}" />
  </el-container>
</template>

<script>
import sidebar from '@/components/Sidebar/sidebar'
import { Navbar } from '@/components'
import { mapGetters } from 'vuex'
import sesto from '@/storage/sessionstorage.js'
import Hamburger from '@/components/Hamburger/index'
export default {
  name: 'Index',
  components: {
    navbar: Navbar,
    // sidebar: Sidebar,
    leftnav: sidebar,
    hamburger: Hamburger
  },
  data() {
    return {
      // 背景颜色

      play: true,
      scrolltop: 0,
      routerList: [
        {
          path: '/index',
          name: '首页',
          active: true
        }
      ]
    }
  },
  provide() {
    return {
      getScroll: () => this.scrolltop
    }
  },
  computed: {
    msg: function() {
      return this.$store.getters.name
    },
    ...mapGetters(['sidebar'])
  },
  watch: {
    $route: function(val) {
      console.log(val)
      console.log(val.meta.name)
      if (this.routerList.findIndex(item => item.path === val.path) < 0) {
        // 大于6强制销毁
        if (this.routerList.length > 6) {
          this.routerList.splice(1, 1)
        }
        this.routerList.forEach(item => {
          item.active = false
        })
        this.routerList.push({
          name: val.meta.name,
          path: val.path,
          active: true
        })
      } else {
        this.routerList.forEach(item => {
          item.active = item.path === val.path
        })
      }
      sesto.setItem('routerList', this.routerList)
    }
  },
  mounted() {
    this.routerList = sesto.getItem('routerList') || this.routerList
  },
  beforeDestroy() {
    // sesto.setItem("routerList", this.routerList);
  },
  beforeMount() {},
  // mounted() {
  // },
  methods: {
    handleScroll() {
      this.scrolltop = this.$refs.elmain.scrollTop.toString()
    },
    // 窗口关闭时跳转
    handleClose(index) {
      this.routerList.splice(index, 1)
      this.$router.push(this.routerList[index - 1].path)
    },
    toggleSideBar() {
      // console.log(this.$store.getters.collapsed);
      this.$store.dispatch('toCollapse', this.$store.getters.collapsed ? 0 : 1)
    }
  }
}
</script>

<style lang="scss" scoped>
/* body > .el-container {
  margin-bottom: 40px;

}
.el-main .analysis {
  border: none !important;
} */
#index-module {
  height: 100vh;
}
#el-main {
  background: #f0f2f5;
  padding-top: 124px;
  padding-right: 24px;
  padding-bottom: 24px;
  height: calc(100vh - 148px);
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100vh;
}
.navheader {
  display: inline-block;
  width: fit-content;
  cursor: pointer;
  border-right: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  font-size: 13px;
  padding: 0px 15px;
  color: #999999;
  height: 39px;
}
.navheader:hover {
  background-color: #f4f4f5;
}
.navheader-active {
  display: inline-block;
  width: fit-content;
  cursor: pointer;
  border-right: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  font-size: 13px;
  padding: 0px 15px;
  background-color: #2f4050;
  color: #a7b1c2;
  height: 39px;
}
.navheader-active:hover {
  color: #fff;
}
.close-icon {
  font-weight: bold;
  color: grey !important;
}
.close-icon:hover {
  color: #f56c6c !important;
}
// .close-icon-active{
//   font-weight: bold;
//   color: grey !important;

// }
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 200ms ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-220px);
  opacity: 0;
}
.slide-enter-active {
  transition: all 1000ms ease;
}
.slide-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(50px);
  opacity: 0.1;
}
.hamburg {
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  position: fixed;
  top: 61px;
  z-index: 999;
  // left: 219px;
  right: 0px;
  border-bottom: 2px solid black;
  overflow: hidden;
}
.router-view {
  padding: 20px 32px;
  min-height: calc(100vh - 192px);
}
</style>
